<template>
  <div id="app" style="background-color: #eff4f9">
    <!-- 服务注册 -->
    <div
      class="box-card"
      style="
        border: 1px solid #eff4f9;
        background-color: #eff4f9;
        padding: 15px;
      "
    >
      <div
        class="clearfix"
        style="background-color: #fff; height: 50px; padding: 20px"
      >
        <span
          style="
            font-weight: bold;
            font-size: 18px;
            color: #303133;
            padding-left: 10px;
          "
          >服务注册</span
        >
      </div>
    </div>

    <!-- 服务信息 -->
    <div
      class="box-card"
      style="
        border: 1px solid #eff4f9;
        padding: 15px;
        background-color: #eff4f9;
      "
    >
      <div
        class="clearfix"
        style="
          background-color: #fff;
          height: 50px;
          padding: 20px;
          margin-bottom: 5px;
        "
      >
        <span
          style="
            font-weight: bold;
            font-size: 18px;
            color: #303133;
            padding-left: 10px;
          "
          >服务信息</span
        >
      </div>

      <div style="background-color: #fff; padding: 10px">
        <el-form :model="serviceForm" label-width="120px">
          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item label="服务名称">
                <el-input v-model="serviceForm.serviceName"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="中文名称">
                <el-input v-model="serviceForm.serviceTitle"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="服务标识">
                <el-input
                  v-model="serviceForm.interfaceContractList"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item label="负载均衡方式">
                <el-select
                  v-model="serviceForm.loadBalanceType"
                  placeholder="请选择负载均衡方式"
                  style="width: 100%"
                >
                  <el-option label="服务端负载均衡" value="01"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="服务描述">
                <el-input v-model="serviceForm.serviceDescription"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </div>

    <!-- 端口信息 -->
    <div
      class="box-card"
      style="
        border: 1px solid #eff4f9;
        background-color: #eff4f9;
        padding: 15px;
      "
    >
      <div
        class="clearfix"
        style="
          background-color: #fff;
          height: 50px;
          padding: 20px;
          margin-bottom: 5px;
        "
      >
        <span
          style="
            font-weight: bold;
            font-size: 18px;
            color: #303133;
            padding-left: 10px;
          "
          >端口信息</span
        >
      </div>

      <div style="background-color: #fff; padding: 10px">
        <el-form :model="portInfoList" label-width="120px">
          <el-row :gutter="10">
            <el-col :span="4">
              <el-form-item label="服务地址">
                <el-input
                  v-model="portInfoList.ip"
                  style="width: 100%"
                ></el-input>
              </el-form-item>
            </el-col>

            <el-col :span="4">
              <el-form-item label="端口协议">
                <el-select
                  v-model="portInfoList.type"
                  placeholder="请选择端口协议"
                >
                  <el-option label="http" value="http"></el-option>
                </el-select>
              </el-form-item>
            </el-col>

            <el-col :span="4">
              <el-form-item label="内部端口">
                <el-input v-model="portInfoList.originalPort"></el-input>
              </el-form-item>
            </el-col>

            <el-col :span="4">
              <el-form-item label="暴露端口">
                <el-input v-model="portInfoList.port"></el-input>
              </el-form-item>
            </el-col>

            <el-col :span="4">
              <el-form-item label="URL">
                <el-input v-model="portInfoList.baseUrl"></el-input>
              </el-form-item>
            </el-col>

            <!-- Aligning the Add button with the inputs -->
            <el-col
              :span="4"
              style="
                display: flex;
                justify-content: flex-start;
                align-items: center;
              "
            >
              <el-button
                type="primary"
                @click="addPort"
                style="margin-top: 0px; margin-left: 155px"
                :style="{ borderRadius: '4px' }"
                class="el-button-primary-style"
                >添加</el-button
              >
            </el-col>
          </el-row>
        </el-form>
      </div>

      <div style="background-color: #fff; padding: 10px; text-align: center">
        <el-table
          :data="serviceForm.serviceInstanceList"
          style="
            width: 100%;
            margin-top: 10px;
            margin: 0 auto;
            justify-content: center;
          "
          border
        >
          <el-table-column
            prop="ip"
            label="服务地址"
            align="center"
          ></el-table-column>
          <el-table-column
            :formatter="(row) => row.portInfoList[0].type"
            label="端口协议"
            align="center"
          ></el-table-column>
          <el-table-column
            :formatter="(row) => row.portInfoList[0].originalPort"
            label="内部端口"
            align="center"
          ></el-table-column>
          <el-table-column
            :formatter="(row) => row.portInfoList[0].port"
            label="暴露端口"
            align="center"
          ></el-table-column>
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="danger"
                class="el-button-primary-style"
                @click="removePort(scope.$index)"
                :style="{ borderRadius: '4px' }"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>

    <!-- 扩展信息 -->
    <div
      class="box-card"
      style="
        border: 1px solid #eff4f9;
        padding: 15px;
        background-color: #eff4f9;
      "
    >
      <div
        class="clearfix"
        style="
          background-color: #fff;
          height: 50px;
          padding: 20px;
          margin-bottom: 5px;
        "
      >
        <span
          style="
            font-weight: bold;
            font-size: 18px;
            color: #303133;
            padding-left: 10px;
          "
          >扩展信息</span
        >
      </div>
      <div style="background-color: #fff; padding: 10px">
        <el-form :model="serviceForm" label-width="120px">
          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item label="关键词">
                <el-input v-model="serviceForm.keywordList"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="服务开发者">
                <el-input
                  v-model="serviceForm.serviceDeveloperInformation"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="服务公开性">
                <el-select
                  v-model="serviceForm.serviceOpenness"
                  placeholder="请选择公开性"
                  style="width: 100%"
                >
                  <el-option label="公开" value="01"></el-option>
                  <el-option label="私有" value="02"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <!-- <el-col :span="8">
            <el-form-item label="服务依赖">
              <el-input v-model="serviceForm.serviceDependency"></el-input>
            </el-form-item>
          </el-col> -->

            <el-col :span="8">
              <el-form-item label="服务创建者">
                <el-input
                  v-model="serviceForm.serviceCreatorInformation"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="服务提供者">
                <el-input
                  v-model="serviceForm.serviceProviderInformation"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </div>

    <!-- 提交按钮 -->
    <div
      class="box-card"
      style="
        border: 1px solid #eff4f9;
        background-color: #eff4f9;
        padding: 0 15px 0 15px;
      "
    >
      <div style="background-color: #fff; padding: 10px">
        <el-button
          type="primary"
          @click="submitService"
          class="el-button-primary-style"
          :style="{ borderRadius: '4px' }"
          >注册</el-button
        >
        <el-button
          type="info"
          class="el-button-primary-style"
          @click="cancelRegistration"
          :style="{ borderRadius: '4px' }"
          >取消</el-button
        >
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "ServiceRegistration",
  data() {
    return {
      serviceForm: {
        serviceName: "",
        serviceTitle: "",
        interfaceContractList: "",
        loadBalanceType: "01",
        serviceDescription: "",
        keywordList: "",
        serviceDeveloperInformation: "",
        serviceOpenness: "01",
        serviceDependency: "",
        serviceCreator: "",
        serviceProviderInformation: "",
        serviceTitle: "",
        serviceUpdaterInformation: "",
        serviceInstanceList: [],
      },
      portInfoList: {
        ip: "",
        originalPort: "",
        port: "",
        type: "http",
        baseUrl: "",
        dns: "",
      },
    };
  },
  methods: {
    addPort() {
      if (
        !this.portInfoList.ip ||
        !this.portInfoList.originalPort ||
        !this.portInfoList.port ||
        !this.portInfoList.baseUrl
      ) {
        this.$message.warning("⚠️ 请填写完整的端口信息");
        return;
      }
      this.serviceForm.serviceInstanceList.push({
        dbType: "",
        ephemeral: false,
        explain: "",
        ip: this.portInfoList.ip,
        password: "",
        portInfoList: [
          {
            originalPort: parseInt(this.portInfoList.originalPort, 10),
            port: parseInt(this.portInfoList.port, 10),
            type: this.portInfoList.type,
            dns: this.portInfoList.dns,
            baseUrl: this.portInfoList.baseUrl,
          },
        ],
        schema: "",
        userName: "",
        version: "V1",
        weight: 1,
      });
      this.portInfoList = {
        ip: "",
        type: "http",
        originalPort: "",
        port: "",
        dns: "",
        baseUrl: "",
      };
    },
    removePort(index) {
      this.serviceForm.serviceInstanceList.splice(index, 1);
    },
    async submitService() {
      try {
        const payload = {
          implementationType: "04",
          interfaceContractList:
            this.serviceForm.interfaceContractList.split(","),
          keywordList: this.serviceForm.keywordList.split(","),
          loadBalanceType: this.serviceForm.loadBalanceType,
          segmentID: "PROVIDER1.0.0.0",
          serviceCreatorInformation: this.serviceForm.serviceCreatorInformation,
          serviceDescription: this.serviceForm.serviceDescription,
          serviceDeveloperInformation:
            this.serviceForm.serviceDeveloperInformation,
          serviceInstanceList: this.serviceForm.serviceInstanceList,
          serviceName: this.serviceForm.serviceName,
          serviceOpenness: this.serviceForm.serviceOpenness,
          serviceProviderInformation:
            this.serviceForm.serviceProviderInformation,
          serviceTitle: this.serviceForm.serviceTitle,
          serviceUpdaterInformation: this.serviceForm.serviceCreatorInformation, // 假设创建者也是更新者
        };
        // console.log("🚀 提交的数据:", JSON.stringify(payload, null, 2));
        if (this.serviceForm.serviceInstanceList.length === 0) {
          this.$message.warning("请填写完整的端口信息并添加");
          return;
        }
        await this.$serviceListApi.registerService(payload);
        this.$message.success(" 服务注册成功");
        this.$router.push("/ServiceList"); //  注册成功后跳转服务列表
      } catch (error) {
        console.error(" 注册失败:", error);
        this.$message.error(" 服务注册失败");
      }
    },
    cancelRegistration() {
      this.serviceForm = {
        serviceName: "",
        serviceTitle: "",
        interfaceContractList: "",
        loadBalanceType: "01",
        serviceDescription: "",
        keywordList: "",
        serviceDeveloperInformation: "",
        serviceOpenness: "01",
        serviceDependency: "",
        serviceCreator: "",
        serviceProviderInformation: "",
        serviceTitle: "",
        serviceUpdaterInformation: "",
        serviceInstanceList: [],
      };
      this.portInfoList = {
        type: "http",
        originalPort: "",
        port: "",
        dns: "",
        baseUrl: "",
      };
    },
  },
};
</script>

<style scoped>
/* Add space between header and form */
/* .box-card .clearfix {
  margin-bottom: 10px;
} */

/* Optional: Add space to the first input field in the "服务信息" section/* Adjust this value to add more or less space  */
/* .el-form-item {
  margin-top: 10px;
} */
</style>
